<template>
  <div style="background: #f8fafd; padding: 15px">
    <el-container>
      <el-header>
        <span>区域搜索：</span><el-input v-model="searcharea"></el-input
        ><el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-header>
      <el-main>
        <div class="main-header">
          <el-button @click="handleAdd"
            ><i class="el-icon-circle-plus-outline"></i>新建</el-button
          >
        </div>
        <div class="main-main">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="区域名称" width="340">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="点位数" width="340">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.nodeCount }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="备注说明" width="340">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.remark }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleSee(scope.$index, scope.row)"
                  >查看详情</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="main-footer">
            <p>
              共{{ zoneList.totalCount }}条记录，第{{ zoneList.pageIndex }}/{{
                zoneList.totalPage
              }}页
            </p>
            <div>
              <el-button
                @click="lastPage"
                :disabled="zoneList.pageIndex === '1' ? true : false"
                >上一页</el-button
              >
              <el-button
                @click="nextPage"
                :disabled="
                  zoneList.pageIndex >= zoneList.totalPage ? true : false
                "
                >下一页</el-button
              >
            </div>
          </div>
        </div>
      </el-main>
      <el-dialog
        :title="flag1 ? '修改区域' : '新增区域'"
        :visible.sync="dialogFormVisible"
        width="630px"
      >
        <el-form ref="remark" :model="form" :rules="rules">
          <el-form-item
            label="区域名称:"
            :label-width="formLabelWidth"
            prop="regionName"
          >
            <el-input
              v-model="form.regionName"
              autocomplete="off"
              maxlength="15"
              show-word-limit
              placeholder="请输入区域名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="备注说明:"
            :label-width="formLabelWidth"
            prop="remark"
          >
            <el-input
              v-model="form.remark"
              autocomplete="off"
              type="textarea"
              maxlength="40"
              placeholder="请输入备注(不超过40字)"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="point">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import {
  getZoneList,
  removeZoneList,
  reworkZoneList,
  seeZoneList,
  addZoneList
} from '@/api/zoneManagement'
export default {
  name: 'zone-management',
  created() {
    this.getZoneList()
  },
  data() {
    return {
      tableData: [],
      zoneList: [],
      flag: true,
      flag1: true,
      searcharea: '',
      Query: {
        pageIndex: 1,
        pageSize: 10
      },
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        regionName: '',
        remark: ''
      },
      formLabelWidth: '120px',
      rules: {
        regionName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async search() {
      const data = await getZoneList(this.Query, this.searcharea)
      console.log(data)
      this.tableData = data.currentPageRecords
      this.zoneList = data
    },
    async getZoneList() {
      const data = await getZoneList(this.Query)
      console.log(data)
      this.tableData = data.currentPageRecords
      this.zoneList = data
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
      this.form.regionName = row.name
      this.form.remark = row.remark
      this.id = row.id
      this.$nextTick(() => {
        this.$refs.remark.resetFields()
      })
    },
    async point() {
      if (this.flag1 === true) {
        try {
          await this.$refs.remark.validate()
          const res = await reworkZoneList(this.id, this.form)
          console.log(res)
          this.dialogFormVisible = false
          this.getZoneList()
        } catch (err) {
          console.log(err)
        }
      } else {
        try {
          await this.$refs.remark.validate()
          const res = await addZoneList(this.form)
          console.log(res)
          this.getZoneList()
          this.dialogFormVisible = false
        } catch (error) {
          console.log(error)
        }
      }
    },
    async handleDelete(index, row) {
      await removeZoneList(row.id)
      this.getZoneList()
    },
    async handleSee(index, row) {
      console.log(index, row)
      const res = await seeZoneList(row.id)
      console.log(res)
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.flag1 = false
      this.$nextTick(() => {
        this.$refs.remark.resetFields()
      })
    },
    async nextPage() {
      this.Query.pageIndex = this.Query.pageIndex + 1
      this.getZoneList()
    },
    async lastPage() {
      this.Query.pageIndex = this.Query.pageIndex - 1
      this.getZoneList()
    }
  }
}
</script>

<style scoped lang="scss">
.el-header {
  background-color: #fff;
}
::v-deep .el-main {
  margin-top: 15px;
  height: 100vh;
  background-color: #fff;
}
.main-header {
  margin-bottom: 5px;
  .el-button {
    background-color: #e54b15;
    color: #fff;
    .el-icon-circle-plus-outline {
      margin-right: 5px;
    }
  }
}
.main-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-button {
    transform: scale(0.9);
    margin-right: 10px;
  }
  p {
    margin-left: 10px;
  }
}
::v-deep .el-dialog {
  border-radius: 10px;
  .el-input__inner {
    width: 400px;
    height: 40px;
  }
  .el-textarea__inner {
    width: 400px;
    height: 80px;
  }
  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 30px;
  }
  .el-dialog__title {
    font-weight: 700;
    font-size: 18px;
  }
}
::v-deep .el-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 200px;
    .el-input__inner {
      height: 30px;
    }
  }
  .el-button {
    height: 40px;
    margin-left: 10px;
    text-align: center;
    transform: scale(0.8);
    // line-height: -10px;
  }
}
</style>
